<template>
	<view class="page-box">
		<up-swiper v-if="info?.thumb?.length>0" :display-multiple-items="1" :indicatorStyle="{top: '330rpx'}"
			class="swiper" height="400rpx" radius="0rpx" :list="info.thumb" indicator indicatorMode="line"
			keyName="cover" circular></up-swiper>
		<view class="text-info pad-40">
			<view class="font-40">{{info.name}}</view>
			<view class="mar-top-23 font-30">
				<view class="color-error">
					<text>￥</text>
					<text class="font-50 pad-left-right-10 max">{{minOfMins}}</text>
					<text>元起</text>
					<!-- <text>/{{info.unit}}</text> -->
				</view>
			</view>
			<!-- <view class="dot flex mar-top-30 gap15">
				<view>慢必赔</view>
				<view>损害包赔</view>
				<view>满意为止</view>
				<view>不计时</view>
				<view>不赚差价</view>
			</view> -->

			<!-- <view class="mar-top-30">
				<up-tabs :scrollable="false" :list="tabList" :lineColor="`url(/static/image/tab-icon.png) 100% 100%`"
					lineWidth="20" lineHeight="7" :activeStyle="{
			        color: '#0055FE',
			        transform: 'scale(1.05)'
			    }" :inactiveStyle="{
			        color: '#1D1D1D',
			        transform: 'scale(1)'
			    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
				</up-tabs>
			</view> -->
		</view>
		<view class="parse-box">
			<up-parse :previewImg="false" :content="info.long_text"></up-parse>
		</view>
		<!-- 	<view class="mar-top-10 bg-white list-box">
			<view v-for="item in 20" class="betweenX list pad-top-bottom-35 pad-left-right-40 centerY">
				<view class="centerXY">
					<image class="head" src="@/static/image/logo.png" mode=""></image>
					<view class="mar-left-20">
						<view class="font-26">小西瓜momo</view>
						<view class="font-24 color-646464">2024-06-23 14:33</view>
					</view>
				</view>
				<view class="centerY">
					<view class="color-warning mar-right-15">{{rate}}.0</view>
					<up-rate activeColor="#FFC730" inactiveColor="#CCCCCC" :count="5" v-model="rate" readonly></up-rate>
				</view>
			</view>
		</view> -->


		<view class="betweenX button-bottom centerXY" v-if="info.receive_order_status == 1">
			<view @click="hanldeConfirmOrder" class="btn mar-left-20 button-style">立即下单</view>
		</view>

		<!-- 客服 -->
		<suspend icon="/static/image/service.jpg"></suspend>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
	import { workDetail } from '@/api/index.js'
	import { useStore } from '@/store/useCounterStore';
	import util from '@/util/share.js'
	import { dataReportFun } from '@/util/dataReport.js'


	// 分享
	onShareAppMessage(() => {
		return util.onShare({
			path: `/pages/serviceInfo/serviceInfo?id=` + props.value.id
		})
	})

	onShareTimeline(() => {

		let uid = "";
		if (uni.getStorageSync('userId')) {
			uid = uni.getStorageSync('userId');
		}
		
		let imageUrl = uni.getStorageSync('shareCover');
		return {
			query: `uid=${uid}&ref=wxmini_user_share&id=${props.value.id}`,
			title: "心宇利家政",
			imageUrl: imageUrl
		}
	})

	const store = useStore();

	// 页面参数
	let props = ref({});

	// 评价星
	const rate = ref(2);

	// 获取详情数据
	let info = ref({});
	let minOfMins = ref(0);
	onLoad((option) => {
		props.value = option;
		if (option.id) {
			workDetail({
				id: option.id
			}).then(res => {
				info.value = res.data.info;

				let data = res.data.info.reward_lev_detail

				// 提取所有的 min 值
				const minValues = Object.values(data).map(item => item.min);

				// 找到最小的 min 值
				minOfMins.value = Math.min(...minValues);

				// 设置title
				uni.setNavigationBarTitle({
					title: res.data.info.name
				})
			})
		}

		dataReportFun({
			event: "client.page_view",
		})
		util.friends();
	});


	const tabList = reactive([{
			name: '服务介绍',
			id: 1,
		},
		{
			name: '用户评价',
			id: 2,
		}
	])

	// 跳转支付
	const hanldeConfirmOrder = () => {
		if (props.value.id) {
			store.workIds = [props.value.id];
			uni.navigateTo({
				url: '/pages/order/confirmOrder/confirmOrder?workId=' + store.workIds
			})
		}
	}
</script>

<style scoped lang="scss">
	.max {
		line-height: 40rpx;
	}

	.parse-box {
		padding-bottom: 150rpx;
	}

	.parse-box :deep(._img) {
		display: block !important;
		width: 100% !important;
	}

	.head {
		width: 80rpx;
		height: 80rpx;
	}

	.page-box {
		position: relative;
	}

	.list {
		border-bottom: 1rpx solid #EBEBEB;
	}

	.text-info {
		// margin-top: -38rpx;
		// border-radius: 0 50rpx 0 0;
		background: white;
	}

	.dot>view {
		color: $uni-color-primary;
		background: rgba(0, 85, 254, .1);
		border-radius: 10rpx;
		padding: 8rpx 17rpx;
		font-size: 24rpx;
	}

	.button-bottom {
		width: 100%;
		padding: 35rpx 40rpx;
		box-sizing: border-box;
		background: white;
		position: fixed;
		bottom: 0rpx;
		z-index: 2;
	}

	.btn {
		width: 100%;
		height: 100rpx;
		border-radius: 50rpx;
		border: 2rpx solid #C1C1C1;
		line-height: 100rpx;
		text-align: center;
	}

	.list-box {
		padding-bottom: 150rpx;
	}
</style>